import React, {Component} from 'react';
import '../css/aboutUs.css';
import $ from 'jquery';

import banner1 from '../image/1.jpg';
import banner2 from '../image/2.jpg';
import banner3 from '../image/3.jpg';
import banner4 from '../image/4.jpg';
import banner5 from '../image/5.jpg';
import banner6 from '../image/6.jpg';
import banner7 from '../image/7.jpg';
import banner8 from '../image/8.jpg';
import wenhua2 from '../image/wenhua2.jpg';
import wenhua3 from '../image/wenhua3.jpg';
import wenhua4 from '../image/wenhua4.jpg';
import {Consumer} from "../store";


class AboutUs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            currentMenu: 1
        };
    }

    render() {
        return (
            <div style={{overflow: 'hidden'}}>
                <div className="aboutUsHeader">
                </div>
                <div className={"companyIntroduce"}>
                    <div className={"normalContainer"}>
                        <div className={"companyIntroduceTitle"}>公司介绍</div>
                        <p>佛山市领蓝信息科技有限公司创建于2016年10月，是一家软件深度订制开发的互联网公司，专注为中小型企业服务，提供专业的咨询，软件开发实施，项目规划，行业转型。我们团队专业研发生产供应链系统、OA办公系统、移动APP开发、微信公众号、小程序、微商城、网站开发、技术咨询
                            。我们团队将矢志利用创新的互联网技术推动社会的发展与变革，提升企业的核心竞争力，促进社会的高效运作。</p>
                        <p>领蓝科技是一个技术型公司，公司位于广东省佛山市南海区瀚天科技城,核心的技术团队由国内一批从事互联网技术的专业人才组成，有多年的实战经验。</p>
                        <p>领蓝科技立足于行业洞察，以软件研发为核心，以客户需求为导向，在快消百货、地产、政务、工业ERP等行业有着重大的突破，系统平台涉及的有公众号，小程序，后台管理系统，app等配套系统。</p>
                        <p>领蓝科技的目标：努力成为客户满意的软件定制服务提供商，您的满意是我们宗旨。我们的理念:"诚信为本、实力为先，全心全意为客户”，我们公司秉承客户至上、服务至上的经营理念，以卓越的IT服务品质、专业的技术服务实力、技术精湛的客户服务团队，保障客户在信息时代的高速路上驰骋，又以稳固、发展、忠诚、高效、团结与创新的精神，尊重人才，注重技术，使客户在享受信息科技发展最新成果的同时不断获得最大的收益。</p>
                    </div>
                </div>
                <div className={"projectList"}>
                    <div className="carousel clearfix" data-gap="80">
                        <figure className={"clearfix"}>
                            <img src={banner1} alt=""/>
                            <img src={banner2} alt=""/>
                            <img src={banner3} alt=""/>
                            <img src={banner4} alt=""/>
                            <img src={banner5} alt=""/>
                            <img src={banner6} alt=""/>
                            <img src={banner7} alt=""/>
                            <img src={banner8} alt=""/>
                        </figure>
                        <nav>
                            <button className="nav prev">Prev</button>
                            <button className="nav next">Next</button>
                        </nav>
                    </div>
                </div>
                <div className={"companyVision"}>
                    <div className={"normalContainer"}>
                        <div className={"companyVisionTitle"}>企业愿景</div>
                        <div className={"companyList"}>
                            <div className={"companyListItem"}>
                                <img src={wenhua2} alt=""/>
                                <div className={"companyListItemTitle"}>使命</div>
                                <div className={"companyListItemDetail"}>
                                    利用信息技术加强沟通与协作,提升社会运作效率
                                </div>
                                <div className={"companyListItemTemp clearfix"}>
                                    <div className={"companyListItemShelter"}>
                                        <div className={"companyListItemShelterHeader"}></div>
                                        <div className={"companyListItemShelterTitle"}>使命</div>
                                        <div className={"companyListItemShelterDetail"}>利用信息技术加强沟通与协作,提升社会运作效率</div>
                                        <div className={"companyListItemShelterBottom"}></div>
                                    </div>
                                </div>
                            </div>
                            <div className={"companyListItem"}>
                                <img src={wenhua3} alt=""/>
                                <div className={"companyListItemTitle"}>发展路径</div>
                                <div className={"companyListItemDetail"}>
                                    专注于企业应用，走专业化、产品化、运营化的发展道路
                                </div>
                                <div className={"companyListItemTemp clearfix"}>
                                    <div className={"companyListItemShelter"}>
                                        <div className={"companyListItemShelterHeader"}></div>
                                        <div className={"companyListItemShelterTitle"}>发展路径</div>
                                        <div className={"companyListItemShelterDetail"}>专注于企业应用，走专业化、产品化、运营化的发展道路</div>
                                        <div className={"companyListItemShelterBottom"}></div>
                                    </div>
                                </div>
                            </div>
                            <div className={"companyListItem"}>
                                <img src={wenhua4} alt=""/>
                                <div className={"companyListItemTitle"}>宏图</div>
                                <div className={"companyListItemDetail"}>
                                    成为领先的互联网+应用服务提供商
                                </div>
                                <div className={"companyListItemTemp clearfix"}>
                                    <div className={"companyListItemShelter"}>
                                        <div className={"companyListItemShelterHeader"}></div>
                                        <div className={"companyListItemShelterTitle"}>宏图</div>
                                        <div className={"companyListItemShelterDetail"}>成为领先的互联网+应用服务提供商</div>
                                        <div className={"companyListItemShelterBottom"}></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={'mapContainer'}>
                    <div className={"normalContainer"} style={{height:'600px'}} id={'mapContainer'}>

                    </div>
                </div>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({num: 6});
        $(document).scrollTop(0);
        this.handleShowSolution();
        this.handleAddEvent();
        this.handleLoadingMap();
    };

    /**
     * 加载地图
     */
    handleLoadingMap(){
        const BMap = window.BMap;
        const map = new BMap.Map("mapContainer"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(113.184639,23.031209), 19); // 初始化地图,设    置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
        map.setCurrentCity("佛山"); // 设置地图显示的城市 此项是必须设置的
        const marker = new BMap.Marker(new BMap.Point(113.184639,23.031209));
        map.addOverlay(marker);
        const opts = {
            width : 240,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "公司地址"  // 信息窗口标题
        };
        const infoWindow = new BMap.InfoWindow("佛山市南海区瀚天科技城B1区3号楼509-4室", opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, map.getCenter());
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    }


    /**
     * 添加
     */
    handleAddEvent() {
        const _this = this;
        const carousels = document.querySelectorAll('.carousel');
        for (let i = 0; i < carousels.length; i++) {
            _this.carousel(carousels[i]);
        }
    }

    carousel(root) {
        let figure = root.querySelector('figure'),
            nav = root.querySelector('nav'),
            images = figure.children,
            n = images.length,
            gap = root.dataset.gap || 0,
            bfc = 'bfc' in root.dataset,
            theta = 2 * Math.PI / n,
            currImage = 0;

        setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
        window.addEventListener('resize', function () {
            setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
        });

        setupNavigation();

        function setupCarousel(n, s) {
            let apothem = s / (2 * Math.tan(Math.PI / n));

            // figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';
            // figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';
            let temp = '50% 50% ' + -apothem + 'px';
            $(figure).css({'transform-origin': temp, '-ms-transform-origin': temp});

            for (let i = 0; i < n; i++) {
                images[i].style.padding = gap + 'px';
            }
            for (let i = 1; i < n; i++) {
                //images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
                //images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
                let temp1 = 'rotateY(' + i * theta + 'rad)';
                $(images[i]).css({'transform-origin': temp, '-ms-transform-origin': temp});
                $(images[i]).css({'transform': temp1, '-ms-transform': temp1});
            }
            if (bfc) for (let i = 0; i < n; i++) {
                images[i].style.backfaceVisibility = 'hidden';
            }
            rotateCarousel(currImage);
        }

        function setupNavigation() {
            nav.addEventListener('click', onClick, true);

            function onClick(e) {
                e.stopPropagation();
                let t = e.target;
                if (t.tagName.toUpperCase() !== 'BUTTON') return;

                if (t.classList.contains('next')) {
                    currImage++;
                } else {
                    currImage--;
                }

                rotateCarousel(currImage);
            }
        }

        function rotateCarousel(imageIndex) {
            figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
        }
    }

    /**
     * 处理解决方案遮挡层隐藏与显示
     * @param num
     */
    handleShowSolution() {
        const _this = this;
        $('.companyListItem').each(function () {
            $(this).mouseenter(function (e) {
                const w = this.clientWidth / 2;
                const h = this.clientHeight / 2;
                const anglePoint = Math.atan(w / h) * 180 / Math.PI;
                const direct = _this.getDirection(e, w, h, anglePoint);
                switch (direct) {
                    case 'down':
                        $($(this).find('.companyListItemShelter')).css({
                            left: '0px',
                            top: '100%'
                        }).stop(true, true).animate({top: '0px'}, 'fast');
                        break;
                    case 'up':
                        $($(this).find('.companyListItemShelter')).css({
                            left: '0px',
                            top: '-100%'
                        }).stop(true, true).animate({top: '0px'}, 'fast');
                        break;
                    case 'right':
                        $($(this).find('.companyListItemShelter')).css({
                            left: '100%',
                            top: '0px'
                        }).stop(true, true).animate({left: '0px'}, 'fast');
                        break;
                    case 'left':
                        $($(this).find('.companyListItemShelter')).css({
                            left: '-100%',
                            top: '0px'
                        }).stop(true, true).animate({left: '0px'}, 'fast');
                        break;
                    default:
                        break;
                }
            });
            $(this).mouseleave(function (e) {
                const w = this.clientWidth / 2;
                const h = this.clientHeight / 2;
                const anglePoint = Math.atan(w / h) * 180 / Math.PI;
                const direct = _this.getDirection(e, w, h, anglePoint);
                switch (direct) {
                    case 'down':
                        $($(this).find('.companyListItemShelter')).stop(true, true).animate({top: '100%'}, 'fast');
                        break;
                    case 'up':
                        $($(this).find('.companyListItemShelter')).stop(true, true).animate({top: '-100%'}, 'fast');
                        break;
                    case 'right':
                        $($(this).find('.companyListItemShelter')).stop(true, true).animate({left: '100%'}, 'fast');
                        break;
                    case 'left':
                        $($(this).find('.companyListItemShelter')).stop(true, true).animate({left: '-100%'}, 'fast');
                        break;
                    default:
                        break;
                }
            })
        })
    };

    getDirection(event, w, h, anglePoint) {
        let direct,
            x = event.offsetX,
            y = event.offsetY,
            angle = Math.atan((x - w) / -(y - h)) * 180 / Math.PI;
        if (angle <= anglePoint && angle >= -anglePoint) {
            if (y > h) {
                direct = 'down';
            } else {
                direct = 'up';
            }
        } else if (x > w) {
            direct = 'right';
        } else {
            direct = 'left';
        }
        return direct;
    }
}

export default prop => (
    <Consumer>
        {
            props => (
                <AboutUs {...props} {...prop}/>
            )
        }
    </Consumer>
)

//export default AboutUs;